import {Button, Form, Row, Col, Input, Select, message} from 'antd'
import React, {memo, useState, useEffect} from 'react'
import {history} from 'umi'
import styles from './index.less'

import {getDict} from '@/service/common/dict'
import 'moment/locale/zh-cn'

import {processConfigType} from '../../dict'

import {
	processSave,
	processUpdate,
	getDetail,
} from '@/service/workflow/configure'

type OtherParams = {
	processValue?: string
	processConfigType?: string
}

const addDom = memo((props: {location: any}) => {
	const [getId, setId] = useState<string>()
	const [type, setType] = useState<string>()
	const [form] = Form.useForm()
	const [supplierForm] = Form.useForm()
	const [otherParams, setOtherParams] = useState<OtherParams>()
	const [dict, setDict] = useState({
		Process_Type: [],
	})

	// 初始化-详情数据
	const getView = (detailId: string) => {
		getDetail(detailId).then((res: any) => {
			if (res?.success) {
				form.setFieldsValue({
					...res?.data,
					processConfigType: `${res?.data?.processConfigType}`,
				})
			}
		})
	}

	// 根据路由判断当前页面状态
	useEffect(() => {
		const {id} = props.location.query
		setId(() => id)
		const hrefs = window.location.href
		if (hrefs.includes('view')) {
			setType('view')
		} else if (hrefs.includes('add')) {
			setType('add')
		} else if (hrefs.includes('edit')) {
			setType('edit')
		}
		getDict(
			{
				dictKeys: ['Process_Type'],
			},
			(res: any) => {
				setDict(res)
			},
		)
		if (id) {
			getView(id)
		}
	}, [getId, type])

	const submit = async () => {
		form.validateFields()
		supplierForm.validateFields()
		const {id} = props.location.query
		const formData = form.getFieldsValue()
		if (!id) {
			processSave({
				...formData,
				...otherParams,
			})
				.then((res) => {
					if (res.success) {
						message.success(res.msg)
						history.goBack()
					}
				})
				.catch((err) => {
					message.error(err)
				})
		} else {
			processUpdate({
				id,
				...formData,
			})
				.then((res) => {
					if (res.success) {
						message.success(res.msg)
						history.goBack()
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}
	}
	// 流程分类变化
	const onProcessTypeChange = (value: string, option: any) => {
		setOtherParams({
			...otherParams,
			processValue: option?.dictValue,
		})
	}
	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<Form
					form={form}
					name="basic"
					layout="horizontal"
					labelCol={{flex: '120px'}}
					labelAlign="right"
					labelWrap
					initialValues={{remember: true}}
					autoComplete="off">
					<Row gutter={12}>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="流程类型"
								name="processKey"
								rules={[{required: true}]}>
								<Select
									placeholder="请选择"
									optionFilterProp="children"
									options={dict.Process_Type}
									fieldNames={{
										label: 'dictValue',
										value: 'dictKey',
									}}
									onChange={onProcessTypeChange}
								/>
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="参数类型"
								name="processConfigType"
								rules={[{required: true}]}>
								<Select
									placeholder="请选择"
									optionFilterProp="children"
									options={processConfigType}
									fieldNames={{
										label: 'dictValue',
										value: 'dictKey',
									}}
								/>
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="参数key"
								name="processConfigKey"
								rules={[
									{
										required: true,
									},
								]}>
								<Input placeholder="请输入" maxLength={60} />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="审核节点"
								name="auditNode"
								rules={[
									{
										required: true,
									},
								]}>
								<Input placeholder="请输入" maxLength={20} />
							</Form.Item>
						</Col>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="参数名称"
								name="processConfigName"
								rules={[{required: true}]}>
								<Input placeholder="请输入" maxLength={30} />
							</Form.Item>
						</Col>
					</Row>
				</Form>
				<div className={styles.wrap}>
					<Button
						onClick={() => {
							history.go(-1)
						}}>
						取消
					</Button>
					{type === 'add' || type === 'edit' ? (
						<>
							<Button
								type="primary"
								htmlType="submit"
								onClick={submit}>
								保存
							</Button>
						</>
					) : (
						''
					)}
				</div>
			</div>
		</div>
	)
})

export default addDom
